<template>
  <div
    class="components-layout-left leftNav"
    @click="display_contextmenu = false"
    :style="'max-height:' + $store.state.windowAttributes.height + 'px'"
    ref="containerRef"
  >
    <div class="button" @click="addComponent">
      <plus-outlined />
      添加组件
    </div>
    <!-- <a-input-search placeholder="搜索组件" /> -->
    <a-collapse
      v-model:activeKey="activeKey"
      accordion
      @change="changCollapse"
      :expand-icon-position="'right'"
    >
      <a-collapse-panel key="1" header="背景组件">
        <div
          class="container"
          :style="'max-height:' + $store.state.windowAttributes.height + 'px'"
        >
          <ul class="svg-nav-list" v-if="backgroundComponentList.length">
            <li
              v-for="item in backgroundComponentList"
              :key="item"
              :class="
                $store.state.BGIMG.ID == item.id ? 'toolbar-selected' : ''
              "
              @contextmenu.prevent="contextmenuEvent($event, item)"
            >
              <div class="title">{{ item.title }}</div>
              <img
                :title="item.title"
                @mousedown="Mousedown(item, 'bgImg')"
                :src="item.priviewImg"
              />
            </li>
          </ul>
          <a-empty v-else description="暂无背景组件" />
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="贴图层">
        <div
          class="container"
          :style="'max-height:' + $store.state.windowAttributes.height + 'px'"
        >
          <ul class="svg-nav-list" v-if="scatterLayerList.length">
            <li
              :class="
                $store.state.currentSelectMapToolBar.id == item.id
                  ? 'toolbar-selected'
                  : ''
              "
              v-for="item in scatterLayerList"
              :key="item"
            >
              <div class="title">{{ item.title }}</div>
              <img
                :title="item.title"
                @contextmenu.prevent="contextmenuEvent($event, item)"
                @mousedown="Mousedown(item, 'mapDraggable')"
                :src="item.priviewImg"
                draggable="draggable"
              />
            </li>
          </ul>
          <a-empty v-else description="暂无贴地点图层组件" />
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="轨迹线图层">
        <div
          class="container"
          :style="'max-height:' + $store.state.windowAttributes.height + 'px'"
        >
          <ul class="svg-nav-list" v-if="pulseLineLayerList.length">
            <li
              :class="
                $store.state.currentSelectMapToolBar.id == item.id
                  ? 'toolbar-selected'
                  : ''
              "
              v-for="item in pulseLineLayerList"
              :key="item"
            >
              <div class="title">{{ item.title }}</div>
              <img
                :title="item.title"
                @contextmenu.prevent="contextmenuEvent($event, item)"
                @mousedown="Mousedown(item, 'mapDraw')"
                :src="item.priviewImg"
                draggable="draggable"
              />
            </li>
          </ul>
          <a-empty v-else description="暂无轨迹线图层组件" />
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="4" header="工具层">
        <div
          class="container"
          :style="'max-height:' + $store.state.windowAttributes.height + 'px'"
        >
          <ul class="svg-nav-list" v-if="mouseTools.length">
            <li
              :class="
                $store.state.currentSelectMapToolBar.id == item.id
                  ? 'toolbar-selected'
                  : ''
              "
              v-for="item in mouseTools"
              :key="item"
            >
              <div class="title">{{ item.title }}</div>
              <img
                :title="item.title"
                @contextmenu.prevent="contextmenuEvent($event, item)"
                @mousedown="Mousedown(item, 'mouseTools')"
                :src="item.priviewImg"
                draggable="draggable"
              />
            </li>
          </ul>
          <a-empty v-else description="暂无轨迹线图层组件" />
        </div>
      </a-collapse-panel>
    </a-collapse>
    <!-- 右键菜单 -->
    <ul ref="contextMenuRef" class="contextMenu" v-show="display_contextmenu">
      <li
        v-for="(item, index) in contextmenu_data"
        :key="index"
        @click="deleteLeftComponent(item)"
      >
        <p :class="item.enable ? '' : 'disabled'">
          {{ item.name }}
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
import { PlusOutlined } from '@ant-design/icons-vue';
import { imageUrlToBase64 } from '@/util';
export default {
  emits: ['clearRightConfigAttribute'],
  props: ['leftComponentsList', 'windowAttributes'],
  data() {
    return {
      contextmenu_data: [
        {
          id: '',
          name: '删除',
          type: 'delete',
          enable: true,
        },
      ],
      isSelectLine: false, //是否选中绘制轨迹线
      isSelectMouseTools: false, //是否选中鼠标插件
      backgroundComponentList: [],
      activeKey: ['1'], //当前激活的key
      display_contextmenu: false, //右键菜单
      selectMenu: {},
      CurrentlySelectedObj: {},
      //地图类组件
      scatterLayerList: [], //贴图地点
      pulseLineLayerList: [], //轨迹线
      mouseTools: [], //鼠标工具层
    };
  },
  watch: {
    leftComponentsList: {
      deep: true,
      handler(val) {
        if (val) {
          this.backgroundComponentList = val.filter((m) => {
            return m.createType == 'bgImg';
          });
          this.scatterLayerList = val.filter((m) => {
            return m.createType == 'scatterLayer';
          });
          //默认背景色
          this.backgroundComponentList.unshift(
            {
              id: 'FirstOneBgImg',
              title: '默认',
              createType: 'default',
              priviewImg: require('../../assets/img/default.png'),
              base64Data: '#000000',
            },
            {
              id: 'MAP',
              title: '百度地图',
              priviewImg: require('../../assets/img/map.png'),
              createType: 'default',
            }
          );
          //默认贴图
          this.scatterLayerList.unshift({
            id: 'scatterLay',
            title: '贴图点',
            priviewImg: require('../../assets/img/scatterLay.png'),
            imgValue:
              'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
            createType: 'mapDraggable',
          });
          //默认轨迹线
          this.pulseLineLayerList.unshift({
            id: 'pulseLine',
            title: '轨迹线',
            priviewImg: require('../../assets/img/pulseLine.png'),
            imgValue:
              'https://a.amap.com/Loca/static/loca-v2/demos/images/pulseLine.png',
            createType: 'mapDraw',
          });
          this.mouseTools.unshift({
            id: 'polygon',
            title: '绘制围栏',
            priviewImg: require('../../assets/img/fence.png'),
            imgValue: '',
            createType: 'mouerTools',
          });
        }
      },
    },
  },
  methods: {
    addComponent() {
      this.$emit('changeAddComponentVisiable', true);
    },
    /**
     * @description: 点击左侧工具栏触发函数
     * @param {*} type
     * @param {*} title
     * @param {*} defaultAttr 属性默认值
     * @param {*} createType 组件创建方式
     * @return {*}
     */
    Mousedown(item, type = 'normal') {
      switch (type) {
        case 'bgImg':
          if (
            item.priviewImg &&
            item.if != 'MAP' &&
            item.id != 'FirstOneBgImg'
          ) {
            imageUrlToBase64(item.priviewImg).then((base64) => {
              this.CurrentlySelectedObj = {
                ID: item.id,
                TYPE: item.createType,
                BASE64DATA: base64,
              };
              this.$store.setCurrentlySelectBase64DataAction(
                this.CurrentlySelectedObj
              );
            });
          } else {
            this.CurrentlySelectedObj = {
              ID: item.id,
              TYPE: item.createType,
              BASE64DATA: '',
            };
            this.$store.setCurrentlySelectBase64DataAction(
              this.CurrentlySelectedObj
            );
          }
          break;
        case 'mapDraggable':
          const mapScatterLay = {
            id: item.id,
            name: item.title,
            geometryType: 'Point',
            componentType: 'scatterLayerComponents',
            createType: type,
            layerStyle: {
              texture: item.imgValue ? item.imgValue : item.priviewImg,
            },
            sourceData: {},
          };
          this.$store.setCurrentSelectMapToolBar(mapScatterLay);
          break;
        case 'mapDraw':
          //绘制线可取消绘制状态
          this.isSelectLine = !this.isSelectLine;
          if (this.isSelectLine) {
            const mapPulseLine = {
              id: item.id,
              name: item.title,
              componentType: 'pulseLineLayoutComponents',
              createType: type,
              sourceData: {},
              layerStyle: {},
            };
            this.$store.setCurrentSelectMapToolBar(mapPulseLine);
            console.log(this.$store.state.currentSelectMapToolBar);
          } else {
            this.$store.clearCurrentlySelectedMapToolBarAction();
          }
          break;
        case 'mouseTools':
          this.isSelectMouseTools = !this.isSelectMouseTools;
          if (this.isSelectMouseTools) {
            const mouerTool = {
              id: item.id,
              name: item.title,
              componentType: item.id,
              createType: type,
              layerStyle: {},
              sourceData: {},
            };
            this.$store.setCurrentSelectMapToolBar(mouerTool);
          } else {
            this.$store.clearCurrentlySelectedMapToolBarAction();
          }
          break;
      }
      this.display_contextmenu = false;
      this.$emit('clearRightConfigAttribute');
    },
    contextmenuEvent(e, item) {
      //是否为默认
      if (item.defaultIcon == 1) {
        const contextMenuRef = this.$refs.contextMenuRef;
        this.display_contextmenu = true;
        contextMenuRef.style.left = e.pageX + 'px';
        contextMenuRef.style.top = e.pageY - 80 + 'px';
        this.contextmenu_data.map((m) => ((m.enable = true), (m.id = item.id)));
      }
    },
    deleteLeftComponent(item) {
      this.$emit('deleteLeftComponent', item.id);
      this.display_contextmenu = false;
    },
    changCollapse() {
      this.display_contextmenu = false;
      this.$store.clearCurrentlySelectedMapToolBarAction();
      this.isSelectLine = this.isSelectMouseTools = false;
    },
  },
  mounted() {
    //默认背景色
    this.backgroundComponentList.unshift(
      {
        id: 'FirstOneBgImg',
        title: '默认',
        createType: 'default',
        priviewImg: require('../../assets/img/default.png'),
        base64Data: '#000000',
      },
      {
        id: 'MAP',
        title: '百度地图',
        priviewImg: require('../../assets/img/map.png'),
        createType: 'default',
      }
    );
    //test--------------------
    //默认贴图
    this.scatterLayerList.unshift({
      id: 'scatterLay',
      title: '贴图点',
      priviewImg: require('../../assets/img/scatterLay.png'),
      imgValue:
        'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
      createType: 'mapDraggable',
    });
    //默认轨迹线
    this.pulseLineLayerList.unshift({
      id: 'pulseLine',
      title: '轨迹线',
      priviewImg: require('../../assets/img/pulseLine.png'),
      imgValue:
        'https://a.amap.com/Loca/static/loca-v2/demos/images/pulseLine.png',
      createType: 'mapDraw',
    });
    this.mouseTools.unshift({
            id: 'polygon',
            title: '绘制围栏',
            priviewImg: require('../../assets/img/fence.png'),
            imgValue: '',
            createType: 'mouerTools',
          });
  },
  components: {
    PlusOutlined,
  },
};
</script>
<style lang="less" scoped>
::-webkit-scrollbar {
  width: 6px;
  height: 5px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f2f2f2;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #9e9e9e;
}
.components-layout-left .ant-input-search-icon {
  font-size: 20px !important;
  color: #1890ff !important;
}
.components-layout-left .ant-collapse,
.components-layout-left .ant-collapse-content,
.components-layout-left .ant-collapse > .ant-collapse-item {
  border-color: #eee !important;
}
/deep/ .ant-collapse-content > .ant-collapse-content-box {
  padding: 0 !important;
}
.ant-input-affix-wrapper {
  height: 45px;
  line-height: 45px;
  border: none;
}
.svg-nav-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 20px;
  padding: 0;

  li {
    position: relative;
    // width: calc(33.33% - 30px);
    width: 50px;
    height: 50px;
    margin: 0 15px 15px 15px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 1px 1px 5px #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:hover {
      box-shadow: 1px 1px 10px #ccc;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .title {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      text-align: center;
    }
  }

  &.two-item {
    li {
      width: calc(50% - 30px);
      height: 100px;
      margin-bottom: 25px;
      border-radius: 10px;

      img {
        width: auto;
        height: 100%;
      }
    }
  }
}
.toolbar-selected {
  outline: 1px solid #0cf;
}
.leftNav {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  min-width: unset !important;
  max-width: unset !important;
  width: 260px !important;
  z-index: 1;
  // height: 688px;
  // overflow: hidden;
}
.contextMenu {
  position: absolute;
  z-index: 99999;
  background: #ffffff;
  padding: 5px 0;
  margin: 0px;
  display: block;
  border-radius: 5px;
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
}

.contextMenu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.contextMenu .shortcut {
  width: 115px;
  text-align: right;
  float: right;
}

.contextMenu p {
  text-decoration: none;
  display: block;
  padding: 0px 15px 1px 20px;
  margin: 0;
  user-select: none;
  color: #262626;
  -webkit-user-select: none;
}

.contextMenu p:hover {
  background-color: #0cf;
  color: #ffffff;
  cursor: default;
}

.contextMenu .disabled {
  color: #999;
}
.contextMenu .disabled:hover {
  color: #999;
  background-color: transparent;
}
.contextMenu li.separator {
  border-top: solid 1px #e3e3e3;
  padding-top: 5px;
  margin-top: 5px;
}
.button {
  text-align: center;
  padding: 10px;
  color: white;
  background: #1890ff;
}
.button:hover {
  cursor: pointer;
}
.container {
  // max-height: 494px;
  min-height: 122pxs;
  overflow: auto;
}
</style>
